<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一份神秘礼物</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #1a1a2e;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            overflow: hidden;
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        /* 烟花容器 */
        .fireworks-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: firework-explode 1s ease-out forwards;
        }

        @keyframes firework-explode {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0);
            }
        }

        .firework-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: particle-fly 1.5s ease-out forwards;
        }

        @keyframes particle-fly {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(var(--tx), var(--ty)) scale(0);
            }
        }

        /* 初始模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            max-width: 320px;
            width: 90%;
            overflow: hidden;
        }

        .modal-header {
            padding: 20px 20px 15px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 18px;
            font-weight: 500;
        }

        .modal-body {
            padding: 25px 20px;
            font-size: 16px;
            color: #333;
            text-align: center;
        }

        .modal-footer {
            padding: 15px 20px 20px;
            text-align: right;
        }

        .btn-confirm {
            background-color: #007AFF;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn-confirm:hover {
            background-color: #0056b3;
        }

        
        .btn-confirm:active {
            transform: scale(0.98);
        }

        /* 祝福语消息框 */
        .blessing-message {
            position: absolute;
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.5;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            animation: popOut 0.5s ease-out, fadeOut 5s ease-in forwards;
            pointer-events: none;
            max-width: 200px;
            word-wrap: break-word;
            z-index: 200;
        }

        .blessing-message .heart {
            color: #ff4757;
            margin-right: 4px;
            display: inline-block;
        }

        .blessing-message .hint {
            color: #888;
            font-size: 12px;
            margin-right: 4px;
        }

        .blessing-message .text {
            color: #333;
        }

        /* 不同的背景颜色 - 增加到10种颜色 */
        .bg-white {
            background-color: rgba(255, 255, 255, 0.85);
        }

        .bg-yellow {
            background-color: rgba(255, 251, 230, 0.85);
        }

        .bg-blue {
            background-color: rgba(230, 244, 255, 0.85);
        }

        .bg-pink {
            background-color: rgba(255, 240, 245, 0.85);
        }

        .bg-green {
            background-color: rgba(240, 255, 240, 0.85);
        }

        .bg-purple {
            background-color: rgba(245, 230, 255, 0.85);
        }

        .bg-orange {
            background-color: rgba(255, 245, 230, 0.85);
        }

        .bg-cyan {
            background-color: rgba(230, 255, 255, 0.85);
        }

        .bg-peach {
            background-color: rgba(255, 235, 220, 0.85);
        }

        .bg-lavender {
            background-color: rgba(240, 230, 255, 0.85);
        }

        /* 动画 */
        @keyframes popOut {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(20px);
            }
            50% {
                transform: scale(1.1) translateY(-5px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes fadeOut {
            0%, 80% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translateY(-20px) scale(0.9);
            }
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 背景音乐 -->
    <audio id="bgMusic" loop preload="auto" crossorigin="anonymous">
        <source src="ap1000_us0_pi409_s3407878196.mp3" type="audio/mpeg">
        <source src="./ap1000_us0_pi409_s3407878196.mp3" type="audio/mpeg">
        <!-- 如果浏览器不支持，会显示此提示 -->
        您的浏览器不支持音频播放。
    </audio>

    <!-- 烟花容器 -->
    <div class="fireworks-container" id="fireworksContainer"></div>

    <!-- 初始模态框 -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal-content">
            <div class="modal-header">
                🎁 神秘的礼物
            </div>
            <div class="modal-body">
                您有一份神秘礼物，确定要打开吗？
            </div>
            <div class="modal-footer">
                <button class="btn-confirm" id="confirmBtn">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 祝福语列表 - 增加到70多条
        const blessings = [
  "好好爱自己，比啥都重要",
  "每天都要元气满满",
  "别太累，偶尔偷懒也可",
  "偷偷说，我想你了",
  "你超棒，要信自己",
  "天冷了，记得多穿",
  "别熬夜，早点休息",
  "日常提醒：记得吃水果",
  "累了就歇，不用硬撑",
  "今天也要好心情",
  "愿你今天充实开心",
  "珍惜当下每分每秒",
  "你值得被认真对待",
  "期待见面，越快越好",
  "烦恼退退退，别来扰",
  "接下来，顺顺利利",
  "嘴角上扬，笑一下吧",
  "爱别人，也别忘爱自己",
  "慢慢来，一切会好",
  "你很特别，独一无二",
  "一定要照顾好自己",
  "偶尔放松，心情更棒",
  "享受当下美好时刻",
  "做真实自己，不用装",
  "你值得温柔与偏爱",
  "累了就给自己拥抱",
  "今天也要开心元气",
  "信美好，总会如期至",
  "每天新开始，加油",
  "你是独一无二的宝藏",
  "提醒：记得多喝水",
  "生活普通，藏着美好",
  "保持微笑，好运自来",
  "你很勇敢，比想的厉害",
  "你做得很好，继续加油",
  "你很重要，别小看自己",
  "有人在乎你，别孤单",
  "你值得被珍惜对待",
  "善待自己，拥抱每天",
  "慢慢来，一切会变好",
  "守初心，做喜欢的自己",
  "大胆做喜欢的事",
  "你努力，终有回报",
  "时间会证，坚持值得",
  "未来可期，奔赴好日子",
  "保持乐观，坏事变好事",
  "你不孤单，我一直都在",
  "困难会过，别放弃",
  "保持生活热情",
  "你很聪明，超有想法",
  "你自带魅力，超闪耀",
  "保持可爱与真诚",
  "你很优秀，多肯定自己",
  "保持自信，你本就棒",
  "你很坚强，能跨难关",
  "别放弃，再坚持下",
  "保持善良，被世界善待",
  "心存感恩，日子更暖",
  "享受生活，找小确幸",
  "爱生活，生活也偏爱你",
  "活在当下，惜眼前一切",
  "守童心，永远快乐",
  "拥变化，未来更精彩",
  "信奇迹，它在路上",
  "守希望，黑暗会过",
  "你被爱包围，别怀疑",
  "不管怎样，我永支持你"
];

        // 背景颜色类 - 增加到10种
        const bgClasses = ['bg-white', 'bg-yellow', 'bg-blue', 'bg-pink', 'bg-green', 'bg-purple', 'bg-orange', 'bg-cyan', 'bg-peach', 'bg-lavender'];

        // 初始化
        const modalOverlay = document.getElementById('modalOverlay');
        const confirmBtn = document.getElementById('confirmBtn');
        const fireworksContainer = document.getElementById('fireworksContainer');
        const bgMusic = document.getElementById('bgMusic');
        let messageInterval = null;
        let fireworkInterval = null;

        // 用于跟踪已使用的位置，实现均匀分布
        const usedPositions = [];
        const gridSize = 8; // 将屏幕分成8x8的网格

        // 获取均匀分布的位置
        function getUniformPosition() {
            const maxAttempts = 50;
            let bestX, bestY, minDistance = 0;

            // 计算网格单元大小
            const cellWidth = window.innerWidth / gridSize;
            const cellHeight = window.innerHeight / gridSize;

            for (let attempt = 0; attempt < maxAttempts; attempt++) {
                // 随机选择一个网格
                const gridX = Math.floor(Math.random() * gridSize);
                const gridY = Math.floor(Math.random() * gridSize);
                
                // 在网格内随机位置
                const x = gridX * cellWidth + Math.random() * cellWidth;
                const y = gridY * cellHeight + Math.random() * cellHeight;
                
                // 确保不会超出屏幕边界
                const finalX = Math.max(10, Math.min(x, window.innerWidth - 210));
                const finalY = Math.max(10, Math.min(y, window.innerHeight - 110));

                // 计算与已存在消息的最小距离
                let distance = Infinity;
                for (const pos of usedPositions) {
                    const dx = finalX - pos.x;
                    const dy = finalY - pos.y;
                    distance = Math.min(distance, Math.sqrt(dx * dx + dy * dy));
                }

                // 如果这个位置距离其他消息足够远，或者距离比之前的更好，就使用它
                if (distance > 150 || distance > minDistance) {
                    bestX = finalX;
                    bestY = finalY;
                    minDistance = distance;
                    if (distance > 150) break; // 找到足够远的位置，直接使用
                }
            }

            // 如果找到了好位置，记录它
            if (bestX !== undefined && bestY !== undefined) {
                usedPositions.push({ x: bestX, y: bestY });
                // 限制记录的位置数量，避免内存问题
                if (usedPositions.length > 100) {
                    usedPositions.shift();
                }
            } else {
                // 如果找不到，使用随机位置
                bestX = Math.random() * (window.innerWidth - 200);
                bestY = Math.random() * (window.innerHeight - 100);
            }

            return { x: bestX, y: bestY };
        }

        // 创建祝福语消息
        function createBlessingMessage() {
            const message = document.createElement('div');
            message.className = `blessing-message ${bgClasses[Math.floor(Math.random() * bgClasses.length)]}`;
            
            const blessingText = blessings[Math.floor(Math.random() * blessings.length)];
            
            message.innerHTML = `
                <span class="heart">❤️</span>
                <span class="hint">提示</span>
                <span class="text">${blessingText}</span>
            `;

            // 使用均匀分布的位置
            const position = getUniformPosition();
            message.style.left = `${position.x}px`;
            message.style.top = `${position.y}px`;

            document.body.appendChild(message);

            // 动画结束后移除元素，同时从位置记录中移除
            setTimeout(() => {
                if (message.parentNode) {
                    message.parentNode.removeChild(message);
                    // 从usedPositions中移除对应的位置
                    const index = usedPositions.findIndex(pos => 
                        Math.abs(pos.x - position.x) < 5 && Math.abs(pos.y - position.y) < 5
                    );
                    if (index > -1) {
                        usedPositions.splice(index, 1);
                    }
                }
            }, 5000);
        }

        // 创建烟花效果
        function createFirework(x, y) {
            const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#ffa07a', '#98d8c8', '#f7dc6f', '#bb8fce', '#85c1e2'];
            const color = colors[Math.floor(Math.random() * colors.length)];
            
            // 创建中心点
            const center = document.createElement('div');
            center.className = 'firework';
            center.style.left = x + 'px';
            center.style.top = y + 'px';
            center.style.backgroundColor = color;
            fireworksContainer.appendChild(center);

            // 创建粒子
            const particleCount = 30;
            for (let i = 0; i < particleCount; i++) {
                const angle = (Math.PI * 2 / particleCount) * i;
                const distance = 50 + Math.random() * 100;
                const tx = Math.cos(angle) * distance;
                const ty = Math.sin(angle) * distance;
                
                const particle = document.createElement('div');
                particle.className = 'firework-particle';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.backgroundColor = color;
                particle.style.setProperty('--tx', tx + 'px');
                particle.style.setProperty('--ty', ty + 'px');
                fireworksContainer.appendChild(particle);

                setTimeout(() => {
                    if (particle.parentNode) {
                        particle.parentNode.removeChild(particle);
                    }   
                }, 1500);
            }

            setTimeout(() => {
                if (center.parentNode) {
                    center.parentNode.removeChild(center);
                }
            }, 1000);
        }

        // 定期创建烟花
        function startFireworks() {
            fireworkInterval = setInterval(() => {
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;
                createFirework(x, y);
            }, 600);
        }

        // 播放音乐的函数
        function playMusic() {
            try {
                // 确保音频已加载
                if (bgMusic.readyState < 2) {
                    bgMusic.load();
                }
                
                bgMusic.volume = 0.6; // 设置音量为60%
                
                const playPromise = bgMusic.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log('✓ 音乐开始播放');
                    }).catch(err => {
                        console.log('音乐播放失败:', err);
                        // 如果播放失败，等待一下再尝试
                        setTimeout(() => {
                            bgMusic.play().catch(e => {
                                console.log('重新播放失败:', e);
                            });
                        }, 300);
                    });
                }
            } catch (error) {
                console.log('音乐播放异常:', error);
            }
        }

        // 确认按钮点击事件
        confirmBtn.addEventListener('click', () => {
            modalOverlay.classList.add('hidden');
            
            // 播放背景音乐 - 在用户交互时播放，确保能正常播放
            playMusic();
            
            // 开始烟花动画
            startFireworks();
            
            // 立即创建多个消息，快速填满屏幕
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    createBlessingMessage();
                }, i * 100);
            }

            // 持续创建消息，更频繁地弹出
            messageInterval = setInterval(() => {
                createBlessingMessage();
            }, 300);
        });

        // 音乐加载完成后尝试播放（某些情况下需要）
        bgMusic.addEventListener('loadeddata', () => {
            console.log('音乐加载完成');
        });

        // 监听音乐错误
        bgMusic.addEventListener('error', (e) => {
            console.error('音乐加载错误:', e);
            console.log('请检查音乐文件路径是否正确:', bgMusic.src);
        });

        // 监听音频是否可以播放
        bgMusic.addEventListener('canplay', () => {
            console.log('音乐可以播放');
        });

        // 防止内存泄漏，限制同时存在的消息数量（增加到100个以达到满屏效果）
        setInterval(() => {
            const messages = document.querySelectorAll('.blessing-message');
            if (messages.length > 100) {
                messages[0].remove();
            }
        }, 500);
    </script>
</body>
</html>
